<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/layout.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <!--标题-->
    <div class="title">
        <h1>火拼俄罗斯方块</h1><br>
        <h3>游戏时间 <span id="m">00</span>:<span id="s">00</span></h3>
    </div>
    <!--游戏区-->
    <div class="game">
        <!--我的游戏区-->
        <div class="contain panel panel-success">
            <div class="name panel-heading" id="name-local">我的游戏</div>
            <!--信息区-->
            <div class="panel-msg">
                <span class="label label-info">下一个：</span>
                <div class="next well" id="next-local"></div>
                <div class="msg">
                    <span class="score-label">得分：</span>
                    <span class="score-value" id="score-local"></span>
                </div>
            </div>
            <!--游戏区-->
            <div class="panel-game" id="panel-local"></div>
        </div>

        <!--对手游戏区-->
        <div class="contain panel panel-warning">
            <div class="name panel-heading" id="name-remote">等待对手</div>
            <!--信息区-->
            <div class="panel-msg">
                <span class="label label-info">下一个：</span>
                <div class="next well" id="next-remote"></div>
                <div class="msg">
                    <span class="score-label">得分：</span>
                    <span class="score-value" id="score-remote"></span>
                </div>
            </div>
            <!--游戏区-->
            <div class="panel-game" id="panel-remote"></div>
        </div>
    </div>

    <!--胜利结果弹窗-->
    <div class="modal" id="win">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body win"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-group-xs" id="win-again">再来一局</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--失败结果弹窗-->
    <div class="modal" id="lose">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body lose"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-group-xs" id="lose-again">再来一局</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--准备弹窗-->
    <div class="modal" id="prepare" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">规则说明</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success" role="alert">操作键： ↑旋转 ←左移 →右移 ↓加速 space 坠地 </div>
                    <div class="alert alert-info" role="alert">得分： 一行 10分  二行 30分  三行 60分  四行 100分</div>
                    <div class="alert alert-warning" role="alert">一方成功消掉几行，对方就会增加几行随机生成的方块</div>
                    <div class="alert alert-danger" role="alert">胜利条件： 对方先到达顶部 或 己方先到达2000分 </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-group-xs" id="start">准备</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--昵称弹窗-->
    <div class="modal" id="panel-name" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">请输入昵称</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group-lg">
                        <input type="text" id="ipt-name" class="form-control" aria-describedby="sizing-addon1">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-group-xs" id="btn-name">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script defer src="./js/jquery-3.1.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script defer src="./js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script defer src="./js/socket.io.js"></script>
    <script defer src="./js/main.js"></script>
</body>
</html>